<div class="flex-header">
    <div class="header-item">任务号：{{ _pipe.taskCode }}</div>
    <div class="header-item">图号：{{ _pipe.drawingCode }}</div>
    <div class="header-item">任务名称：{{ _pipe.taskName }}</div>
    <div class="header-item">数量：{{ _pipe.amountPlanned }}</div>
    <div class="header-item">
        完成时间：{{ _pipe.dueDatePlanned | momentFormat: 'YYYY-MM-DD' }}
    </div>
</div>

<div class="flex">
    <div class="prev">
        <a
            href="javascript:;"
            (click)="onPrevClick($event)"
            [hidden]="firstIdx <= 1"
        >
            <i class="fa fa-chevron-left"></i>
        </a>
    </div>

    <div class="flex-pipe">
        <div
            *ngFor="let component of currentComponents"
            class="flex-component"
            [ngClass]="{
                'component-active':
                    component.isCurrent && pipe?.statusName !== '完成',
                'finish-component':
                    component.seq < currentComponentIdx ||
                    pipe?.statusName === '完成'
            }"
        >
            <div class="component-context">
                <div class="component__title">
                    <span
                        class="m-badge m-badge--success"
                        style="min-width: 12px; min-height: 12px;"
                        *ngIf="component.ifAutomatic"
                    ></span>
                    <font> {{ component.seq }}.{{ component.actName }} </font>
                    <i
                        *ngIf="component.isTriggeredAbnormal"
                        class="fa fa-exclamation-triangle m--font-warning"
                    ></i>
                    <i
                        *ngIf="component.isInstertedAct"
                        class="fa fa-exclamation-triangle m--font-info"
                    ></i>
                </div>
                <div class="component__role" *ngIf="component.execuUser==null">
                    <i class="fa fa-user" style="color: #999;"></i>
                    {{ component.actRole }}
                </div>
                <div class="component__role" *ngIf="component.execuUser!=null">
                    <i class="fa fa-user" style="color: #999;"></i>
                    {{ component.execuUser }}
                </div>
                <div class="component__type">
                    <i
                        class="fa fa-cube"
                        style="font-size: 12px; color: #999;"
                    ></i>
                    {{ component.actTypeName }}
                </div>
                <div>
                    <span
                        style="color: #666;"
                        *ngIf="component.seq < currentComponentIdx"
                    >
                        <i class="fa fa-hourglass-end" style="color: #999;"></i>
                        {{ component.warningDateStr }}
                    </span>
                    <a
                        href="javascript:;"
                        style="color: #666;"
                        *ngIf="component.seq >= currentComponentIdx"
                        (click)="warningTimeModal.show(_pipe, component)"
                    >
                        <i class="fa fa-hourglass-end" style="color: #999;"></i>
                        {{ component.warningDateStr }}
                        <input type="data" *ngIf="showInput" />
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="next">
        <a
            href="javascript:;"
            (click)="onNextClick($event)"
            [hidden]="lastIdx >= length"
        >
            <i class="fa fa-chevron-right"></i>
        </a>
    </div>

    <warningTimeModal #warningTimeModal></warningTimeModal>
</div>
